<template>
	<view class="xi">
		<!-- active 是选中 -->
		<view class="xi1 active">
			快洗-10元
		</view>
		<view class="xi1">
			精细洗-20元
		</view>
	</view>
	<view class="voucher1">
			<view class="voucher2"></view>
			<view class="rech">
				支付方式
			</view>
		</view>
		<view class="pay">
			<view class="wx">
				余额支付
			</view>
			<radio-group class="radio-group">
				<label class="radio">
					<radio color="#157DF7"  checked="checked" /><text></text>
				</label>
			</radio-group>
		</view>
		<button class="btn" @click="zhifu">
			确认支付
		</button>
		<view style="height: 40rpx;"></view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onShow() {
			
		},
		methods:{
			zhifu(){
				uni.showToast({
					title:"支付成功"
				})
			}
		}
	}
</script>

<style lang="less">
.xi{
	.xi1{
		height: 50rpx;
		background-color: beige;
		margin-bottom: 20rpx;
		text-align: center;
	}
	.active{
		background-color: aqua;
	}
	
}
.voucher1{
  			height: 40rpx;
  			padding-top: 40rpx;
  			display: flex;
  			.voucher2{
  				height: 30rpx;
  				width: 10rpx;
  				background-color: #127FFF;
  				position: relative;
  				top: 6rpx;
  				border-radius: 90rpx;
  			}
  			.rech{
  				padding-left: 14rpx;
  				font-weight: bold;
  			}
  			
  			
  		}
  		.much{
  			padding-top: 40rpx;
  			height: 230rpx;
  			display: flex;
  			flex-wrap: wrap;
  			justify-content: space-between;
  			
  			.much1{
  				width: 30%;
  				height: 100rpx;
  				line-height: 100rpx;
  				text-align: center;
  				background-color: #F8F8F8;
  				border-radius: 30rpx;
  				color:#6E6E6E;
  				.much2{
  					font-size: 20px;
  					
  				}
  			}
  			.active{
  				width: 30%;
  				height: 100rpx;
  				line-height: 100rpx;
  				text-align: center;
  				background-color: #157DF7;
  				border-radius: 30rpx;
  				color:#6E6E6E;
  				.much2{
  					font-size: 20px;
  					
  				}
  			}
  		}
  		.ipt{
  			height: 100rpx;
  			line-height: 100rpx;
  			background-color: #F8F8F8;
  			border-radius: 30rpx;
  			color:#6E6E6E;
  		}
  		.pay{
  			padding-top: 40rpx;
  			height: 50rpx;
  			line-height: 50rpx;
  			display: flex;
  			.wx{
  				padding-left: 20rpx;
  			}
  			.radio-group{
  				position: absolute;
  				right: 50rpx;
  		
  			}
  		}
  		.explain{
  			margin-top: 40rpx;
  			line-height: 50rpx;
  			background-color: #F8F8F8;
  			font-size: 15px;
  			color: #6E6E6E;
  		}
  		.btn{
  			margin: 110rpx 0;
  			background-color: #127FFF;
  			font-size: 18px;
  			color:white
  			
  		}

</style>
